<template>
  <section class="app-inner">
    <el-card class="header-card">
      <el-form :inline="true" :model="form" size="small">
        <el-form-item label="任务名称">
          <el-input v-model="form.taskName" clearable placeholder="请输入任务名称" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="巡检执行人">
          <el-input v-model="form.userName" clearable placeholder="请输入巡检执行人" maxlength="32"></el-input>
        </el-form-item>
        <el-form-item label="巡检时间">
          <el-date-picker
            v-model="form.startTime"
            type="datetime"
            placeholder="请输入开始日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsStart"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker
            v-model="form.endTime"
            type="datetime"
            placeholder="请输入结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptionsEnd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="巡检状态">
          <el-select v-model="form.taskStatus" clearable placeholder="请选择">
            <el-option
              v-for="(item, index) in options"
              :key="index"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="margin-left: 10px;">查 询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card class="table-card">
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column prop="taskCode" label="任务编号"></el-table-column>
        <el-table-column prop="taskType" label="任务类型">
          <template slot-scope="scope">
            {{ getLabel(scope.row.taskType) }}
          </template>
        </el-table-column>
        <el-table-column prop="taskName" label="任务名称"></el-table-column>
        <el-table-column prop="taskOperatorUserName" label="巡检执行人"></el-table-column>
        <el-table-column prop="startTime" label="计划开启巡检时间"></el-table-column>
        <el-table-column prop="completeTime" label="完成时间">
          <template slot-scope="scope">
            <span v-if="scope.row.taskCompleteState === 2">{{ scope.row.completeTime }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="taskCompleteState" label="处理状态" :formatter="comFormatter"></el-table-column>
        <el-table-column prop="hasException" label="巡检异常">
          <template slot-scope="scope">
            <span v-if="scope.row.taskCompleteState === 2">{{ scope.row.hasException }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="overtime" label="超时完成">
          <template slot-scope="scope">
            <span v-if="scope.row.taskCompleteState === 2">{{ scope.row.overtime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="handleSpot(scope.row)" type="text" size="small">巡更信息</el-button>
            <el-button @click="handleDetail(scope.row)" type="text" size="small">查看详情</el-button>
            <el-button @click="handleTask(scope.row)" type="text" size="small">查看巡检任务</el-button>
            <!-- <el-button @click="handleMonitor(scope.row)" type="text" size="small">查看监控信息</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        layout="total, prev, pager, next"
        @current-change="pageHandleChange"
        :current-page="currentPage"
        :total="totalPageNum"
      ></el-pagination>
    </el-card>
    <el-dialog :title="eventControl" :before-close="handleClose" :visible.sync="dialogDecVisible" center>
      <el-form ref="editFormRef" :model="editForm" :rules="rules">
        <el-table border :data="spotArray" style="width: 100%">
          <el-table-column prop="spotCode" label="巡更点编号"></el-table-column>
          <el-table-column prop="spotName" label="巡更点名称"></el-table-column>
          <el-table-column prop="completeTime" label="完成时间">
            <template slot-scope="scope">
              {{ getComTime(scope.row) }}
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </el-dialog>
    <monitor-modal ref="monitorModal"></monitor-modal>
  </section>
</template>

<script>
import { getTask, getTaskInfo } from './js/patrol'
import { taskCompleteState, planTypeList } from './js/constants'
import MonitorModal from './components/MonitorModal'
export default {
  data () {
    return {
      repairUser: '',
      email: '',
      radio1: '',
      eventControl: '',
      dialogHandleVisible: false,
      dialogDecVisible: false,
      currentPage: 1,
      totalPageNum: 0,
      pageSize: 10,
      options: taskCompleteState,
      handleForm: {
        rwoNumber: '',
        date: '',
        repairUserName: '',
        repairContent: '',
        repairUserDeptName: '',
        urgency: '',
        repairUserEmail: '',
        repairUserMobile: '',
        imgPath: '',
        repairPicUrl: [],
        staff: '',
        noticeTag: ''
      },
      form: {
        taskCode: '',
        taskName: '',
        userName: '',
        taskStatus: '',
        startTime: '',
        endTime: ''
      },
      editForm: {},
      searchData: {
        taskName: '',
        userName: '',
        endTimeFrom: '',
        endTimeTo: '',
        taskCompleteState: ''
      },
      pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endTime) {
            return time.getTime() > new Date(this.form.endTime).getTime()
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.form.startTime) {
            return time.getTime() < new Date(this.form.startTime).getTime() - 86400000
          }
        }
      },
      rules: {
        staff: [{ required: true, message: '维修人不能为空', trigger: 'blur' }]
      },
      maintainer: [],
      tableData: [],
      spotArray: [],
      taskCompleteState: ''
    }
  },
  components: {
    MonitorModal
  },
  mounted () {
    this.getTaskList(this.searchData)
  },
  methods: {
    comFormatter (row, column, cellValue) {
      return this.$base.constFormatter(taskCompleteState, cellValue)
    },
    onSubmit () {
      this.currentPage = 1
      this.searchData = {
        taskName: this.form.taskName,
        userName: this.form.userName,
        endTimeFrom: this.form.startTime,
        endTimeTo: this.form.endTime,
        taskCompleteState: this.form.taskStatus
      }
      this.getTaskList(this.searchData)
    },
    async getTaskList (data) {
      let params = {
        ...data,
        isAuto: 1,
        pageNum: this.currentPage,
        pageSize: 10
      }
      let res = await getTask(params)
      this.totalPageNum = res.data.total
      res = res.data.list
      res.forEach(item => {
        item.overtime ? (item.overtime = '是') : (item.overtime = '否')
        item.hasException ? (item.hasException = '是') : (item.hasException = '否')
      })
      this.tableData = res
    },
    handleSpot (row) {
      this.eventControl = '查看巡更点完成情况'
      this.dialogDecVisible = true
      this.getSpotList(row.taskCode)
    },
    async getSpotList (data) {
      let res = await getTaskInfo(data)
      this.taskCompleteState = res.data.taskCompleteState
      this.spotArray = res.data.taskSpotEventList
    },
    handleDetail (row) {
      row.routerFlag = 0
      // this.$router.push({ name: 'patrolInspectDetail', params: row })
      this.$router.push({ path: 'InspectDetail', query: row })
    },
    closeHandle () {
      this.dialogHandleVisible = false
      this.$refs.handleFormRef.resetFields()
    },
    handleTask (row) {
      // this.$router.push({ name: 'patrolInspectTask', params: row })
      this.$router.push({ path: 'InspectTask', query: row })
    },
    handleMonitor (row) {
      this.$refs.monitorModal.open(row)
    },
    handleClose () {
      this.dialogDecVisible = false
      this.taskCompleteState = ''
    },
    getComTime (row) {
      if (this.taskCompleteState !== 2) {
        return '--'
      } else {
        return row.completeTime
      }
    },
    pageHandleChange (page) {
      this.currentPage = page
      this.getTaskList(this.searchData)
    },
    getLabel (val) {
      return this.$base.constFormatter(planTypeList, val)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-inner {
  height: 100%;
  .header-card {
    margin-bottom: 10px;
    .el-form {
      .el-form-item {
        .el-input {
          width: 160px;
        }
        .el-select {
          width: 160px;
        }
      }
      // .createBtn {
      //   float: right;
      // }
    }
  }
  .el-pagination {
    text-align: center;
    display: block;
    margin: 10px auto;
  }
  .img-over {
    margin-right: 5px;
    width: 60px;
    height: 45px;
    cursor: pointer;
  }
}
</style>
